<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <script type="text/javascript" src="../../../railView/js/jquery-2.1.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../../railView/js/jquery-ui.min.js" charset="utf-8"></script>
    <style>
        #buttom-container {
            position: absolute;
            top: 4px;
            left: 45px;
            z-index: 99;
        }
        .button {
            padding: 0 10px;
            min-width: 54px;
            height: 30px;
            line-height: 30px;
            margin: 4px;
            text-align: center;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            background: rgba(34, 45, 50, 0.7);
            color: #FFFFFF;
        }
        .button:hover {
            background: rgb(34, 45, 50);
        }
        #oprate-container {
            z-index: 99;
            position: absolute;
            top: 40px;
            left: 48px;
            background: rgba(255, 255, 255, 0.5);
            color: #FFFFFF;
            border-radius: 3px;
            display: none;
            box-shadow: 0 0 10px rgba(34, 45, 50, 0.7);
        }
        .head {
            display: flex;
            justify-content: space-between;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #999999;
            background-color: rgba(34, 45, 50, 0.5);
            box-sizing: border-box;
            padding: 0 10px;
        }
        #oprate-container > .oprate-content {
            padding: 20px 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .oprate-item {
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
        }
        #methods {
            background: #45a3ff;
            border: 0;
            border-radius: 4px;
            height: 25px;
            width: 60px;
            text-align: center;
            color: #FFFF;
        }
        .oprate-item span {
            color: black;
        }
        .oprate-item button {
            background: #45a3ff;
            border: 0;
            border-radius: 4px;
            height: 25px;
            width: 75px;
            text-align: center;
            color: #FFFF;
        }
        .oprate-item:nth-child(1) {
            margin-top: 0;
        }
        .input {
            height: 25px;
            line-height: 25px;
            background-color: #fff;
            border: 2px solid #e6e6e6;
            border-radius: 3px;
            color: #999999;
        }
        .input:focus {
            outline: 0;
            box-shadow: 0px 0px 5px rgb(34 45 50);
        }
        .head {
            display: flex;
            justify-content: space-between;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #999999;
            background-color: #45a3ff;
            box-sizing: border-box;
            padding: 0 10px;
            position: relative;
            color: #FFFFFF;
        }
        .head>span:last-child {
            cursor: pointer;
            color: #45a3ff;
            font-size: 12px;
            height: 18px;
            width: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            right: 3%;
            transform: translateY(-50%);
            background: #FFFFFF
        }
        .footer {
            width: 100%;
            height: 35px;
            line-height: 35px;
            color: #45a3ff;
            border-top: 1px solid #999999;
            display: flex;
            justify-content: space-between;
        }
        .footer > span {
            cursor: pointer;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div id="buttom-container">
        <button class="button" onclick="setOrbitStyle()">设置旋转交点样式</button>
    </div>
    <div id="left" style="width:100%;height:100%;position:relative;float:left"></div>
    <div id="oprate-container">
        <div class="head">
            <span>设置</span>
            <span onclick="hideModel()" style="cursor: pointer">&#10005;</span>
        </div>
        <div class="oprate-content">
            <div class="oprate-item">
                <span>类型：</span>
                <select id="type">
                    <option value="point">点</option>
                    <option value="img">图片</option>
                </select>
            </div>
            <div class="oprate-item" id="typeImg" style="display: none;">
                <span>交点样式：</span>
                <input 
                    id="imgUrl" 
                    class="input"
                    value="https://img1.baidu.com/it/u=1695081474,3661458691&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500"
                    placeholder="请输入图片地址" 
                >
            </div>
            <div id="typePoint" style="padding-top: 10px;">
                <div class="oprate-item">
                    <span>交点大小：</span>
                    <input id="size" placeholder="请输入交点大小" class="input" value="1">
                </div>
                <div class="oprate-item">
                    <span>交点颜色：</span>
                    <input type="color" name="" value="#e6e6e6" id="color">
                </div>
            </div>
        </div>
        <div class="footer">
            <span onclick="handleSubmit()">确定</span>
            <span onclick="resetToDefault()">恢复默认设置</span>
        </div>
    </div>
    <script id="viewerStartup">
        let model;
        let ids = [];
        let oprate = document.getElementById('oprate-container');
        window.onload = function () {
            let proleft = new CarsView("left", 'csr', exampleModelId, callbackleft, {
                isShowAxis: true
            });
            proleft.then(function (value) {
                model = value;
            });
        }
        function callbackleft(nodeNames, nodeIds, position, center, normal) {
            ids = nodeIds;
        }
        function setOrbitStyle() {
            oprate.style.display = 'inline-block';
        }
        // 类型判断
        $("select").change(function () {
            if ($(this).val() === "img") {
                document.getElementById('typePoint').style.display = 'none'
                document.getElementById('typeImg').style.display = 'block'
            } else {
                document.getElementById('typePoint').style.display = 'block'
                document.getElementById('typeImg').style.display = 'none'
            }
        });
        function handleSubmit() {
            let imgUrl = document.getElementById('imgUrl').value;
            let type = document.getElementById("type").value;
            let size = Number(document.getElementById('size').value);
            const hex = document.getElementById('color').value;
            const red = Number('0x' + hex.substring(1, 3));
            const green = Number('0x' + hex.substring(3, 5));
            const blue = Number('0x' + hex.substring(5, 7));

            if (type === "point") {
                model.setOrbitCtrlOperatorStyle("point", {
                    size: size,
                    color: { r: red, g: green, b: blue },
                });
            } else {
                model.setOrbitCtrlOperatorStyle("img", {
                    icon: imgUrl,
                });
            }
        }
        function resetToDefault () {
            document.getElementById('imgUrl').value = "https://img2.baidu.com/it/u=3818895290,245479360&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500";
            document.getElementById('type').value = "point";
            document.getElementById('size').value = 1;
            document.getElementById('color').value = "#e6e6e6"
            document.getElementById('typePoint').style.display = 'block'
            document.getElementById('typeImg').style.display = 'none'
        }
        function hideModel() {
            document.getElementById('imgUrl').value = "";
            document.getElementById('type').value = "point";
            document.getElementById('color').value = "#e6e6e6"
            oprate.style.display = 'none';
        }
    </script>
</body>
</html>
